<template>
  <div class="outside">
    <div class="top">
      <div class="img">
        <img :src="playlists.coverImgUrl">
      </div>
      <div class="detail">
        <div class="top-detail">
          <span class="tag">歌单</span>
          <span style="font-size:22px;font-weight:800">{{playlists.name}}</span>
        </div>
        <div class="creator">
          <img :src="playlists.creator.avatarUrl" alt="" style="width:24px;height:24px;border-radius:50%;cursor:pointer;padding-right:5px;" @click="GoProfile">
          <span style="font-size:5px;cursor:pointer;color:rgb(11,88,176);padding-right: 15px;" @click="GoProfile()">{{playlists.creator.nickname}}</span>
          <span style="font-size:5px;color:rgb(103,103,103)">{{playlists.createTime | SimpleDataFormat}}创建</span>
        </div>
        <div class="button">
          <play-all-button @showDialog="showDialog"></play-all-button>
          <div class="buttonitem">
            <i class="iconfont icon-xinjianwenjian" style="font-size:17px"></i>
            <span>收藏({{playlists.subscribedCount | simpNum(5)}})</span>
          </div>
          <div class="buttonitem">
            <i class="iconfont icon-fenxiang"></i>
            分享({{playlists.shareCount | simpNum(5)}})
          </div>
          <div class="buttonitem">
            <i class="iconfont icon-xiazai1"></i>
            下载全部
          </div>
        </div>
        <div class="bottom-detail" v-show="type == 0">
          <div>标签 : <span style="color:rgb(80,125,175);cursor:pointer">{{getTags}}</span></div>
          <div>歌曲 : <span style="margin-right:9px">{{playlists.trackCount}}</span> 播放 : {{playlists.playCount | simpNum(5)}}</div>
          <div class="description">
            <span style="flex:1">简介 : </span>
            <span style="color:rgb(103,103,103);flex:28;width:1010px" :class="{shouldfold:!isfold}">{{playlists.description}}</span>
            <i class="iconfont icon-htmal5icon03" style="transform: rotateZ(180deg);" v-show="!isfold" @click="fold"></i>
            <i class="iconfont icon-htmal5icon03" v-show="isfold" @click="fold"></i>
          </div>
        </div>
        <div class="bottom-detail" v-show="type == 1">
          <div>歌手 : <span style="color:rgb(80,125,175);cursor:pointer">{{getTags}}</span></div>
          <div>时间 : <span style="margin-right:9px">{{playlists.trackCount}}</span></div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <tabs :labels="labels"  ref='tabs' class="detail-tabs" @handleClick="handleClick"></tabs>
      <song-list v-show="routes[0]" :songlist='playlists.tracks'></song-list>
      <comment v-show="routes[1]" :type="2" :id="this.id"></comment>
      <collector v-show="routes[2]" :subscribers='playlists.subscribers'></collector>
    </div>
    <Dialog ref="dialog" @addplaylist="addplaylist"></Dialog> 
  </div>
</template>

<script>
import { request } from 'network/request'
import {SimpleDataFormat,simpNum} from 'common/filter'
import Tabs from 'components/common/tabs/Tabs'  
import SongList from './childComps/SongList'
import Comment from './childComps/Comment'
import Collector from './childComps/Collector'
import playAllButton from 'components/common/button'
import Dialog from 'components/common/replaceDialog'
export default {
  name:'playListDetail',
  data(){
    return{
      id:null,
      playlists:{
        coverImgUrl:null,
        creator:{avatarUrl:''}
      },
      isfold:true,
      labels:['歌曲列表','评论()','收藏者'],
      routes:[true,false,false],
      // dialogVisible:false,
      type:0,
      album:null
    }
  },
  components:{
    Tabs,
    Collector,
    Comment,
    SongList,
    playAllButton,
    Dialog,
    // ishowDialog
  },
    
  methods:{
    fold(){
      this.isfold = !this.isfold
    },
    handleClick(tab){
      this.routes = [false,false,false]
      this.routes[tab.index] = true
    },
    showDialog(){
      this.$refs.dialog.dialogVisible = true
    },
    addplaylist(){
      this.$store.commit('addPlayList',this.playlists.tracks)
      this.$refs.dialog.dialogVisible = false
    },
    GoProfile(){
      this.$router.push('/profile/'+this.playlists.creator.userId)
    }
  },
  computed:{
    getTags(){
      let arr = this.playlists.tags
      let tagstr = ''
      if(arr){
        tagstr = arr.length == 1 ? arr.toString() : arr.join('／') 
      }
      return tagstr
    }
  },
  async created(){
    this.id = this.$route.params.id
    this.type = this.$route.params.type
    if(this.type == 0){
      const data = await request("GET",'/playlist/detail',{id:this.id})
      this.playlists = data.playlist
      this.$set(this.labels,1,`评论(${data.playlist.commentCount | simpNum})`)
    }else if(this.type == 1){
      const data = await request("GET",'album',{id:this.id})
      this.playlists = data.album
    }
    
  },
  filters:{
    SimpleDataFormat,
    simpNum
  }
}
</script>

<style scoped>
  .top{
    margin-top: 20px;
    display: flex;
  } 
  .top img{
    width: 185px;
    height: 185px;
    border-radius: 5px;
  }
  .top .detail{
    margin-left: 20px;
    position: relative;
    /* margin-top: 5px; */
    /* display: flex; */
  }
  .detail .tag{
    font-size:13px;
    color:rgb(236,65,65);
    padding:0 3px 0.5px 4px;
    border:1px solid rgb(242,140,140);
    border-radius:2px;
    margin-right:10px
  }
  .detail .top-detail{
    display: flex;
    align-items: center;
  }
  .detail .creator{
    display: flex;
    align-items: center;
    margin:8px 0;
    /* width: 200px; */
    justify-content:flex-start;
  }
  .button{
    display: flex;
  }
  .button div{
    box-sizing: border-box;
    height: 32px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 13px;
  }
  .button .buttonitem{
    border: 1px solid rgb(216,216,216); 
    font-size: 14px;
    padding: 0 14px;
    color: rgb(52,52,52);
    margin-left: 15px;
  }
  .button .buttonitem:hover{
    cursor: pointer;
    background-color:rgb(242,242,242);
  }
  .button .buttonitem>i{
    color: rgb(101,101,101);
    margin-right: 3px;
    font-size: 20px;
  }
  .bottom-detail{
    margin-top: 17px;
    display: flex;
    flex-direction: column;
  }
  .bottom-detail div{
    font-size: 12.5px;
    color: rgb(55,55,55);
    margin-bottom: 6px;
  }
  .description{
    display: flex;
    justify-content: center;
    vertical-align: top;
  }
  .description .shouldfold{
    height:20px;
    overflow:hidden;
  }
  .description i{
    color:rgb(153,153,153);
    font-size:13px;
    margin-left:15px;
    height: 100%;
  }
  .bottom{
    margin-top: 16px;
  }
  ::v-deep .detail-tabs .el-tabs__nav .is-active{
    font-size: 15px;
    color: rgb(55,55,55);
  }
  .icon-mv::before,.icon-VIP::before{
    font-size: 23px;
  }
  .icon-mv:hover::before {
    color:rgb(251, 103, 103);
  }
  .icon-mv{
    position:relative;bottom:-2.5px;
  }
</style>